<template>
    <div class="page p-6">
        <el-form :model="form" ref="formRef" inline>
			<el-form-item prop="province" label="省份">
				<el-input v-model="form.province" placeholder="请输入省份名称">></el-input>
			</el-form-item>
			<el-form-item prop="city" label="城市">
				<el-input v-model="form.city" placeholder="请输入城市名称">></el-input>
			</el-form-item>
			<el-form-item prop="name" label="用户姓名">
				<el-input v-model="form.name" placeholder="请输入用户姓名">></el-input>
			</el-form-item>
			<el-form-item prop="gender" label="性别">
                <el-radio-group v-model="form.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
			</el-form-item>
			<el-form-item prop="phone" label="用户手机">
				<el-input v-model="form.phone" placeholder="请输入用户手机">></el-input>
			</el-form-item>
			<el-form-item v-if="global.roles === 'ADMINPLUS'" prop="outletId" label="网点" class="w-40">
                <el-select v-model="form.outletId" placeholder="请选择网点">
                    <el-option v-for="item in outletList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onQuery">查询</el-button>
				<el-button type="primary" @click="onReset">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" class="w-full">
			<el-table-column prop="name" label="姓名" />
			<el-table-column prop="gender" label="性别">
                <template #default="{row}">
                    {{ row.gender == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
			<el-table-column prop="age" label="年龄" />
			<el-table-column prop="orderNum" label="下单次数" />
			<el-table-column prop="province" label="省份" />
			<el-table-column prop="city" label="城市" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{row}">
					<el-button @click="orderList(row.id)" type="primary" link>订单列表</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="flex justify-end mt-6">
            <el-pagination 
            layout="prev, pager, next" 
            :total="pagination.total" 
            v-model:page-size="pagination.limit" 
            v-model:current-page="pagination.page"
            />
        </div>

    </div>   
</template>
    
<script setup lang='ts'>
import { ROLE_ADMINPLUS } from '@/utils/constants';
import request from '@/utils/request';
import type { AnyObj } from '@/utils/type';
import { ElMessage, type FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import router from '@/router';

const formRef = ref<FormInstance>();

const form = reactive({
	province: '',
	city: '',
	phone: '',
	name: '',
    gender: 1,
    outletId: ''
});

const pagination = reactive({
	total: 0,
	limit: 20,
	page: 1
});

const list = ref<AnyObj[]>([]);

const outletList = ref<AnyObj[]>([]);

const loading = ref(false);

const global = reactive({
    roles: localStorage.getItem('roles') || ''
});

/**
 * 重置表单
 */
const onReset = () => {
	formRef.value?.resetFields();
};

/**
 * 点击查询
 */
const onQuery = () => {
    if (global.roles === ROLE_ADMINPLUS && !form.outletId) {
        ElMessage.error('请选择网点');
        return;
    }
	pagination.page = 1;
	getTableData();
};

/**
 * 点击用户订单列表
 */
const orderList = (userId: number) => {
    router.push({
        name: 'UserOrderList',
        params: {
            userId
        }
    });
};

/**
 * 获取网点列表
 */
const getOutletList = async () => {
    try {
        const { records } = await request({
            url: '/api/sys/outlet/list',
            method: 'post',
            contentTypeIsForm: false,
            data: {
                page: 1,
                limit: 999
            },
            errorToast: true
        });
        outletList.value = records;
    } catch (error) {
        
    }
};

/**
 * 获取表格数据
 * @param params 请求的数据
 */
const getTableData = async () => {
	loading.value = true;
	try {
		const { records, total } = await request({
			url: '/api/sys/customer/list',
			method: 'post',
			contentTypeIsForm: false,
			data: {
				...form,
				page: pagination.page,
				limit: pagination.limit
			},
			errorToast: true,
			showLoading: {}
		});
		list.value = records;
		pagination.total = total;
	} catch (error) {
		
	} finally {
		loading.value = false;
	}
};

onMounted(() => {
    if (global.roles != 'ADMINPLUS') {
	    getTableData();
    } else {
        getOutletList();
    }
});
</script>
    
<style lang="scss" scoped>
    
</style>